<template>
  <div class="bottomNav">
    <div
      :class="{ bottomNav__icon: true, active: item.type === props.type }"
      v-for="(item, index) of dockerItems"
      :key="index"
      @click="
        () => {
          dockerClick(item.path);
        }
      "
    >
      <div class="bottomNav__icon__iconfont iconfont" v-html="item.icon"></div>
      <div class="bottomNav__icon__content">{{ item.text }}</div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps(["type"]);
function dockerClick(path) {
  router.push(path);
}
const dockerItems = [
  {
    icon: "&#xe698;",
    text: "工作台",
    type: "home",
    path: "/main",
  },
  {
    icon: "&#xe63f;",
    text: "医疗协作",
    type: "cooperate",
    path: "/cooperate",
  },
  {
    icon: "&#xe6dd;",
    text: "通讯录",
    type: "mailList",
    path: "/mailList",
  },
  {
    icon: "&#xe6fa;",
    text: "我的",
    type: "mine",
    path: "/mine",
  },
];
</script>
<style lang="scss" scoped>
.bottomNav {
  position: fixed;
  bottom: 0;
  background-color: #fff;
  width: 414rem;
  height: 67rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 99;
  &__icon {
    width: 57rem;
    height: 57rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    &__iconfont {
      font-size: 30rem;
      margin-bottom: 5rem;
    }
    &__content {
      font-size: 12rem;
    }
  }
  .active {
    font-weight: bold;
    color: #004aeb;
  }
}
</style>
